/* 禁止调整的样式 */
.no-resize {
  .resize-handle {
    border-color: var(--disable-color);
    cursor: not-allowed;
  }
}
/* 禁止拖拽的样式 */
.no-drag {
  cursor: default;
  &:active {
    cursor: no-drop;
  }
  &:hover {
    border-color: var(--disable-color) !important;
  }
}
.disabled {
  @extend .no-drag;
  @extend.no-resize;
  opacity: 0.5;
}

.draggable_resizable_rotatable {
  /* 手柄大小颜色 */
  $handle-color: #0d99ff;
  /* 手柄大小 */
  $handle-size: 2px;
  /* 旋转控制点的偏移量 */
  $rotation-offset: -13px;
  /* 旋转控制点的大小 */
  $rotation-size: 18px;
  /* 对角线的尺寸 */
  $diagonal-size: 10px;
  --active-color: #dc1cf5;
  --disable-color: rgb(192, 192, 192);
  border: 1px solid #000;
  box-sizing: border-box !important;
  font-family: "PingFang SC";
  /* 避免聚焦的样式 */
  outline: none;
  position: absolute;
  user-select: none;
  z-index: 10;
  cursor: grab;

  &:active {
    cursor: grabbing;
  }

  &:hover {
    border: 1px solid $handle-color;
  }

  %line-v {
    &::after {
      content: "";
      position: absolute;
      width: 10px;
      height: 100%;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  %line-h {
    &::after {
      content: "";
      position: absolute;
      width: 100%;
      height: 10px;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  %diagonal {
    background: white !important;
    z-index: 2;

    border: 2px solid $handle-color;
    width: $diagonal-size !important;
    height: $diagonal-size !important;
    &:active {
      border-color: var(--active-color);
    }
  }

  /* 旋转 */
  .rotation {
    position: absolute;
    width: $rotation-size;
    height: $rotation-size;
    cursor: grab;

    &:active {
      cursor: grabbing;
    }
  }

  .rotation-tr {
    right: $rotation-offset;
    top: $rotation-offset;
  }

  .rotation-tl {
    left: $rotation-offset;
    top: $rotation-offset;
  }

  .rotation-br {
    right: $rotation-offset;
    bottom: $rotation-offset;
  }

  .rotation-bl {
    left: $rotation-offset;
    bottom: $rotation-offset;
  }

  /* 拖拽 */
  .resize-handle {
    position: absolute;
    background: $handle-color;
    z-index: 1;
    &:active {
      background: var(--active-color);
    }
  }

  .resize-mr {
    width: $handle-size;
    right: $handle-size/2 * -1;
    height: 100%;
    cursor: ew-resize;
    top: 0;
    @extend %line-v;
  }

  .resize-mb {
    bottom: $handle-size/2 * -1;
    left: 0;
    height: $handle-size;
    width: 100%;
    cursor: ns-resize;
    @extend %line-h;
  }

  .resize-ml {
    width: $handle-size;
    left: $handle-size/2 * -1;
    top: 0;
    height: 100%;
    cursor: ew-resize;
    @extend %line-v;
  }

  .resize-mt {
    height: $handle-size;
    width: 100%;
    left: 0;
    top: $handle-size/2 * -1;
    cursor: ns-resize;
    @extend %line-h;
  }

  /* 对角线 */
  .resize-br {
    right: -5px;
    bottom: -5px;
    cursor: nwse-resize;
    @extend %diagonal;
  }

  .resize-bl {
    left: -5px;
    bottom: -5px;
    cursor: nesw-resize;
    @extend %diagonal;
  }

  .resize-tr {
    right: -5px;
    top: -5px;
    cursor: nesw-resize;
    @extend %diagonal;
  }

  .resize-tl {
    left: -5px;
    top: -5px;
    cursor: nwse-resize;
    @extend %diagonal;
  }
}
.drag-content {
  height: 100%;
  position: relative;
}
